<template>
    <div class="projects">
        <router-link to="/wrapper" style="float: left">返回首页</router-link>
        <div class="nav">
            <span class="menu"><i class="glyphicon glyphicon-align-justify"></i></span>
            <ul>
               <li>
                   <div class="dropdown">
                       <span>{{team}}</span>
                       <a id="selectteam" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-chevron-down"></i></a>
                       <ul class="dropdown-menu" aria-labelledby="selectteam">
                           <li><a @click="selectteam">美嘉</a></li>
                           <li><a @click="selectteam">美冠</a></li> 
                           <li><a @click="selectteam">医疗</a></li>
                       </ul>
                   </div>
                </li> 
                <li v-if="whichShow === 'tasks'">
                   <div class="dropdown">
                       <span>{{currentProject.projectname}}</span>
                       <a id="selectProject" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-chevron-down"></i></a>
                       <ul class="dropdown-menu" aria-labelledby="selectProject">
                           <li @click="getProjectById({id:0,projectname:'全部项目'})"><a>全部项目</a></li>
                           <li v-for="project in projects" v-if="project.isarchived == 0" @click="getProjectById(project)">
                               <a>{{project.projectname}}</a>
                           </li>
                       </ul>
                   </div>
              </li> 
              <li v-if="whichShow === 'tasks'">
                  <div id="newtodo">
                    <input @keyup.enter="addNewTask" v-model="taskName" placeholder="新任务..." autofocus>
                </div>
              </li>
              <li v-if="whichShow === 'projects'">
                  <div id="newProjects">
                    <input @keyup.enter="addNewProject" v-model="projectName" placeholder="新项目..." autofocus>
                </div>
              </li>
              <li v-if="whichShow === 'tasks'" @click="getAllProjects" class="pull-right">
                  <a class="seeAllTasks">查看所有项目</a>
              </li>
              <li v-if="whichShow === 'projects'" @click="getAllTasks" class="pull-right">
                  <a class="seeAllProjects">查看所有任务</a>
              </li>
              <li class="pull-right" style="position:relative;margin-right:20px;">
                <a class="notice dropdown-toggle" title="通知" data-toggle="dropdown">
                  <i v-bind:class="{shake:getNoticeNum > 0}" class="fa fa-bell-o"></i>
                  <span v-if="getNoticeNum > 0" class="badge">{{getNoticeNum}}</span>
                </a>
                <ul class="dropdown-menu">
                    <!--<li v-if="!getNoticeNum > 0"><a @click="socket">无新通知</a></li>-->
                    <li v-if="notice.status == 1" v-for="notice in notices" @click='expandNotice(notice)'><a>{{notice.content}}</a></li>
                    <li v-if="getNoticeNum > 0" role="separator" class="divider"></li>
                    <li v-if="getNoticeNum > 0" ><a style="color:#4F94CD;text-align:center" @click="allRead">全部设为已读</a></li>
                </ul>
              </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div v-if="whichShow === 'projects'" class="section section-projects">
            <div style="text-align: right;padding-right: 40px;">
                <a @click="archivedProject = false" title="进行中的项目" style="margin-right: 7px;border-right: 1px solid #bbb;padding-right: 8px;"><i class="fa fa-play"></i></a>
                <a @click="archivedProject = true"title="已归档项目"><i class="fa fa-folder"></i></a>
                
            </div>
            <ul v-if="archivedProject == false" style="text-align: left;padding-left:20px;">
                <label style="margin-bottom: -10px;">进行中的项目</label>
                <li v-for="project in projects" v-if="project.isarchived == 0">
                    <div v-bind:style="{'background-color':project.color}" style="position: relative" @click="getProjectById(project)">
                        <div class="color-pick">
                            <span @click="changeProjectColor(project.id,'#2980b9')" style="background-color: #2980b9"></span>
                            <span @click="changeProjectColor(project.id,'#27ae60')" style="background-color: #27ae60"></span>
                            <span @click="changeProjectColor(project.id,'#c70202')" style="background-color: #c70202"></span>
                            <span @click="changeProjectColor(project.id,'#e67e22')" style="background-color: #e67e22"></span>
                            <span @click="changeProjectColor(project.id,'#8e44ad')" style="background-color: #8e44ad"></span>
                            <span @click="changeProjectColor(project.id,'#2c3e50')" style="background-color: #2c3e50"></span>
                            
                        </div>
                        <a @click="projectArchive(project.id,1)" class="delete" title="归档项目"><i class="fa fa-folder"></i></a>
                        <div class="projectName"><span>{{project.projectname}}</span></div>
                    </div>
                </li>
            </ul>
            <ul v-if="archivedProject == true" style="text-align: left;padding-left:20px;">
                <label style="margin-bottom: -10px;">已归档项目</label>
                <li v-for="project in projects" v-if="project.isarchived == 1">
                    <div style="background-color:#aaa; position:relative" @click="getProjectById(project)">
                        <a @click="projectArchive(project.id,0)" class="delete" title="撤销归档"><i class="fa fa-folder"></i></a>
                        <div class="projectName"><span>{{project.projectname}}</span></div>
                    </div>
                </li>
            </ul>
           <div style="height:100px;clear:both"></div>
        </div>
        <div v-show="whichShow === 'tasks'"  class="section section-todos">
            <div style="width: 120px;float:right;margin-left:10px;">            
                <el-select v-model="selectedTaskUser" placeholder="按成员筛选" size="small" >
                    <el-option v-for="taskUser in taskUsers" :label="taskUser.username" :value="taskUser.fuserid"></el-option>
              </el-select>
            </div>
            <div class="todos-all">
                <ul class="todos todos-uncompleted">
                    <label >未完成任务</label>
                    <li v-for="task in tasks" v-if="task.status == '0' && task.isarchived == 0 " >
                        <div class="operate"><a title="任务归档" @click='taskArchive(task.id,1)'><i class="fa fa-trash"></i></a></div>
                        <div class="taskContent">

                        <el-checkbox title="设置为已完成" @change="changeTaskStatus(task.id,'1')"></el-checkbox>
                        <span class="taskComment" v-bind:class="{selectedUserTasks:task.taskuser.id == selectedTaskUser}" @click="taskDetail(task)">{{task.taskcomments}}</span>
                        <a title="变更所属项目" style="font-size: 12px;border-radius: 3px;" @click="showChangeProjectIdDialog(task)">
                            <span v-if="task.projectname == null">未指定项目</span>
                            {{task.projectname}}
                        </a>
                        <a type="text" @click="showAssignDialog(task)"><span v-if="task.taskuser.id == 0 && task.endtime == null">未指派</span>{{task.taskuser.username}} {{task.endtime}}</a>
                        </div>
                    </li>
                </ul>
                <ul class="todos todos-completed">
                    <div class="block" style="float:left;margin-bottom:10px;" >
                        <label style="float:left;margin-right:15px;margin-top:5px;">已完成任务</label>
                        <el-date-picker @change="setDateRange" size="small" v-model="value7" type="daterange" align="right" placeholder="选择完成时间范围" :picker-options="pickerOptions2"></el-date-picker>
                    </div>
                    <li style="clear:both" v-for="task in tasks" v-if="task.status == '1'" >
                        <el-checkbox title="变更为未完成" checked @change="changeTaskStatus(task.id,'0')"></el-checkbox>
                        <span class="taskComment" v-bind:class="{selectedUserTasks:task.taskuser.id == selectedTaskUser }" @click="taskDetail(task)">{{task.taskcomments}}</span>
                        <a title="变更所属项目" style="font-size: 12px;border-radius: 3px;" @click="showChangeProjectIdDialog(task)">
                            <span v-if="task.projectname == null">未指定项目</span>
                            {{task.projectname}}
                        </a>
                        <a type="text" @click="showAssignDialog(task)"><span v-if="task.taskuser.id == 0 && task.endtime == null">未指派</span>{{task.taskuser.username}} {{task.endtime}}</a>
                        <a type="text">完成时间：{{task.donetime}}</a>
                        <i class="fa fa-star" v-if="task.donetime >= value6[0] && task.donetime <= value6[1]"></i>
                        
                        
                    </li>
                </ul>
                 <ul class="todos todos-uncompleted">
                    <label style="clear:both">已归档任务</label>
                    <li v-for="task in tasks" v-if="task.isarchived == '1'">
                        <!--<div class="operate"><a title="撤销归档" @click='taskArchive(task.id,0)'><i class="fa fa-trash"></i></a></div>-->
                        <div class="taskContent">
                        <a style="position: absolute; left: 45px; top:5px;width: 22px;" title="撤销归档" @click='taskArchive(task.id,0)'><i class="fa fa-times-circle"></i></a>    
                        <span class="taskComment" style="text-decoration:line-through;"> {{task.taskcomments}}</span>
                        <a title="变更所属项目" style="font-size: 12px;border-radius: 3px;" @click="showChangeProjectIdDialog(task)">
                            <span v-if="task.projectname == null">未指定项目</span>
                            {{task.projectname}}
                        </a>
                        <a type="text" @click="showAssignDialog(task)"><span v-if="task.taskuser.id == 0 && task.endtime == null">未指派</span>{{task.taskuser.username}} {{task.endtime}}</a>
                        </div>
                    </li>
                </ul>
                 <ul class="file">
                    <label >图片</label>
                    
                    <li v-for='file in files' v-if="file.type == 1">
                        <div class="file-item">
                            <div style="position:relative">
                            <a @click="setCurentFile(file)"><i class="fa fa-times" ></i></a>
                                 <img @click="bigger($event)" v-bind:src="file.filepath" >
                            <!--<img @click="bigger($event)"  src="../assets/imgs/1.jpg" >-->
                            </div>
                            <span>{{file.filename}}</span>
                        </div>
                    </li>
                </ul>
                <div style="clear: both">
                    <label>文件</label>
                    <table style="text-align:left;font-size: 15px;" class="table table-striped table-responsive table-hover">
                        <thead>
                        <tr >
                            <th style="text-align:left">文件名</th>
                            <th style="text-align:left">上传日期</th>
                            <th style="text-align:left">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            
                        <tr v-for="file in files" v-if="file.type == 0">
                            <td><a v-bind:href="file.filepath">{{file.filename}}</a></td>
                            <td>{{file.createdAt | changeDate}}</td>
                            <td><a @click="setCurentFile(file)">删除</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <el-dialog size="tiny" title="任务指派" v-model="dialogFormVisible1">
                <el-form  >
                    <el-form-item label="将任务指派给">
                        
                        <el-select size="small" style="width: 100%" filterable auto-complete="off" placeholder="选择成员" v-model="taskUserid" >
                            <el-option v-bind:class="user.fuserid==taskUserid ? activetaskUserid : ''" v-for="user in users" :label="user.username" :value="user.fuserid"></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="任务截止日期">
                        <el-input v-model="endtime" size="small" style="width: 100%" type="date" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="Assign()">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog size="tiny" title="所属项目变更" v-model="dialogFormVisible2">
                <el-form  >
                    <el-form-item label="选择项目">
                        <el-select size="small" style="width: 100%"  auto-complete="off" v-model="selectedProjectId" placeholder="选择项目" >
                            <el-option value="0" label="不指定项目"></el-option>
                            <el-option v-for="project in projects" :value="project.id" :label="project.projectname"></el-option>
                        </el-select>
                        </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="changeTaskProjectId">确 定</el-button>
                </div>
            </el-dialog>
            <div class="box1" v-if="dialogFormVisible3" @click="dialogFormVisible3 = false"></div>
            <div class="comment row" v-show="dialogFormVisible3">
                <div class="comment-header">
                    <a class="icon" @click="dialogFormVisible3 = false">
                        <i class="fa fa-times"></i>
                    </a>
                    <p style="float: left;padding-left: 20px;">{{currentTask.taskcomments}}</p>
                    <hr style="clear: both">
                </div>    
                <div class="col-md-12 comment-body ">
                    <div class="new-comment" >
                        <textarea class="form-control" rows="2" placeholder="发表一条评论吧..." v-model="newComment"></textarea>
                        <div class="upload-img" v-for='img in uploadimages'>
                            <span>
                                <!--<img src="../assets/imgs/1.jpg" >-->
                            <img :src="img.filepath">
                            </span>
                        </div>
                        <form id="file1" >
                            <input @change="upload1" style="position: absolute;font-size:100px;right:0;top:0;opacity:0;" type="file" name="files"  >
                            <a class="comment-img"><i class="fa fa-plus"></i></a>
                            
                        </form >
                        
                        <!--<div v-show="!showEditor" @click="showEditor = true" style="border-radius:5px;height:40px;border:1px solid #ccc;text-align:left;padding-left:10px;"><span style="line-height:40px;font-size:14px;color:#999;">发表一条评论吧...</span></div>-->
                        
                            <!--<div id="editor" style="height:100px;"></div>-->
                            <a class="btn btn-default pull-right" style="margin:10px;" @click="newComment = ''">取消</a>
                            <a class="btn btn-dropbox pull-right" style="margin:10px;" @click="addNewComment(0)">发表</a>
                        
                    </div>
                    <div class="comment-list">
                    <hr>
                        <ul>
                            <li v-for="taskComment in taskComments" v-if="taskComment.fdid == 0">
                                <div>
                                    
                                    <p ><span style="font-size: 14px;font-weight: bold">{{taskComment.entusername}}：</span><img @click="bigger($event)" style="width:15%;margin:10px;" v-for="img in taskComment.imgs" :src="img.filepath" >{{taskComment.content}}</p>
                                    <p v-if="currentComment.id != taskComment.id" class="taskCommentOperation"><span style="font-size: 12px;color: #999">{{taskComment.createdAt | changeDate}}</span><a @click='commentReply(taskComment)'>回复</a><a v-if="userid == taskComment.entuserid" @click="deleteComment(taskComment.id)">删除</a></p>
                                </div>
                                <div class="commentReply" v-if="currentComment.id == taskComment.id">
                                    <textarea autofocus rows="2" placeholder="回复..." v-model="newReply"></textarea>
                                    <a class="btn btn-xs btn-default pull-right" style="margin-right:5px;" @click="replyCancel">取消</a>
                                    <a class="btn btn-xs btn-dropbox pull-right" style="margin-right:5px;" @click="addNewComment(taskComment)">回复</a>
                                </div>
                                <ul>
                                    <li v-for="taskComment2 in taskComments" v-if="taskComment2.fdid == taskComment.id">
                                        <div>
                                            <p ><span style="font-size: 14px;font-weight: bold">{{taskComment2.entusername}}：</span>{{taskComment2.content}}</p>
                                            <p v-if="currentComment.id != taskComment.id" class="taskCommentOperation"><span style="font-size: 12px;color: #999">{{taskComment2.createdAt | changeDate}}</span><a v-if="userid == taskComment.entuserid || userid == taskComment2.entuserid " @click="deleteComment(taskComment2.id)">删除</a></p>
                                        </div>
                                    </li>
                                </ul>
                                <hr>
                            </li>
                        </ul>
                    </div>
                    <div class="file" >
                        <form id="file2" class="btn btn-danger">
                            <input @change="upload2" type="file" name="files"  >点击上传附件
                        </form>
                        <!--<a class="btn btn-theme" @click="upload">开始上传</a>-->
                    </div>
                <ul style="padding-left:0;clear: both;text-align:left;">
                    <div>

                    <label>图片</label>
                    </div>
                    
                    <li style="float:left" v-for='file in files' v-if="file.type == 1 && file.taskid == currentTask.id">
                         <div class="file-item">
                            <div style="position:relative">
                            <a @click="setCurentFile(file)"><i class="fa fa-times" ></i></a>
                                 <img @click="bigger($event)" v-bind:src="file.filepath" >
                            <!--<img @click="bigger($event)"  src="../assets/imgs/1.jpg" >-->
                            </div>
                            <span>{{file.filename}}</span>
                        </div>
                    </li>
                </ul>
                <div style="clear: both;">
                    <div style="float:left">
                    <label>文件</label>
                    </div>
                    <table style="text-align:left;font-size: 15px;" class="table table-striped table-responsive table-hover">
                        <thead>
                        
                        <tr >
                            <th style="text-align:left">文件名</th>
                            <th style="text-align:left">上传日期</th>
                            <th style="text-align:left">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            
                        <tr v-for="file in files" v-if="file.type == 0 && file.taskid == currentTask.id">
                            <td><a v-bind:href="file.filepath">{{file.filename}}</a></td>
                            <td>{{file.createdAt | changeDate}}</td>
                            <td><a @click="setCurentFile(file)">删除</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
        <div v-if="showImage" @click="showImage = false">
            <div class="box2"></div>
            <div style="z-index:103;position: absolute;width: 940px;">
            <img style="width: 100%"  :src="currentImageSrc" alt="图片">
            </div>
        </div>
        <el-dialog title="提示" v-model="dialogFormVisible4" size="tiny">
            <span>确认要删除此附件？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="deleteFile">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
    </template>
<script>
import io from '../assets/js/socket.io'
    export default {
        data() {
            return {
                file: require('../assets/imgs/file.png'),
                showImage: false,
                currentImageSrc: '',
                userid: localStorage.userid,
                newcomment: true,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false,
                dialogFormVisible4: false,
                archivedProject: false,
                projectName: '',
                whichShow: 'projects',
                team: '美嘉',
                teamid: 4,
                taskName: '',
                projects: [],
                tasks: [],
                currentProject:{
                    id:0,
                    projectname:'全部项目'
                },
                users: '',
                taskUsers: [],
                selectedTaskUser: '',
                taskUserid: '',
                endtime: '',
                selectedProjectId: '',
                activetaskUserid: 'selected',
                selectedUserTasks: 'selectedUserTasks',
                currentTask: {},
                newComment: '',
                newReply:'',
                taskComments: [],
                currentComment: {},
                files: [],
                currentFileId:0,
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                    },
                value6: '',
                value7: '',
                notices:[],
                showEditor:false,
                uploadimages:[]
            }
        },
        filters: {
            changeDate: function(date) {
                var stramp = new Date(date);
                var nowTime = new Date();
                var timeDiff = nowTime - stramp
                if (nowTime.getFullYear() > stramp.getFullYear()) {
                    return date.substring(0, 9)
                } else if (nowTime.getMonth() > stramp.getMonth()) {
                    return date.substring(5, 9)
                } else if (nowTime.getDate() - stramp.getDate() > 2) {
                    return date.substring(5, 9)
                } else if (nowTime.getDate() - stramp.getTime() > 1) {
                    return '前天'
                } else if (nowTime.getDate() - stramp.getDate() == 1) {
                    return '昨天'
                } else if (nowTime.getHours() - stramp.getHours() > 1) {
                    return (nowTime.getHours() - stramp.getHours()) + '小时前'
                } else if (nowTime.getMinutes() - stramp.getMinutes() > 0) {
                    return (nowTime.getMinutes() - stramp.getMinutes()) + '分钟前'
                } else {
                    return '刚刚'
                }
            }
        },
        // sockets: {
        //     connect: function() {
        //         console.log('socket connected')
        //         this.$socket.emit('join',{'userid':localStorage.userid})
        //     },
        //     haveNewNotice: function(data) {
        //         console.log(data)
        //         this.notices = data
        //         }
        // },
        methods: {
            socketStart(){
                var _this = this
                this.httpServer = io.connect('http://192.168.1.66:5001')
                this.httpServer.emit('join',{'userid':localStorage.userid})
                this.httpServer.on('haveNewNotice',function(data){
                    console.log(data)
                    _this.notices = data
                })
            },
            allRead(){
                for(var i = 0;i < this.notices.length; i++){
                    this.notices[i].status = 0
                    this.changeNoticeStatus(this.notices[i])
                }
            },
            changeNoticeStatus(notice){
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/notice/updateNotice',
                    data: {
                        'id':notice.id,
                        'status':notice.status,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误');
                    },
                    success: function(retdata) {
                      console.log('success')
                    }
                });
            },
            expandNotice(notice){
                notice.status = 0
                this.changeNoticeStatus(notice)
                this.whichShow = 'tasks'
                this.currentProject.id = notice.projectid
                this.currentProject.projectname = notice.projectname
                this.getAllTasks()
                if(notice.type == 2){
                    this.dialogFormVisible3 = true
                    this.taskDetail({'id':notice.taskid,'taskcomments': notice.taskcomments })
                }
            },
            addNotice(type,fromPersonId,toPersonid,projectid,taskid,content){
                 var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/notice/addnotice',
                    data: {
                        'type':type,
                        'fromPersonId':fromPersonId,
                        'toPersonId': toPersonid,
                        'content':content,
                        'projectid': projectid,
                        'taskid':taskid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        // _this.notices = retdata
                    }
                });
            },
            getNotice(){
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/notice/getNotices',
                    data: {
                        'toPersonId': localStorage.userid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.notices = retdata
                    }
                });
            },
            setDateRange(){
                if(this.value7[0] != null){

                var temp = []
                var month = parseInt(this.value7[0].getMonth()) + 1
                if(month < 9){
                    month = '0' + month
                }
                var day = parseInt(this.value7[0].getDate())
                if(day < 9){
                    day = '0' + day
                }
                temp[0] = String(this.value7[0].getFullYear()) + '-' + month + '-' + day 
                var month = parseInt(this.value7[1].getMonth()) + 1
                if(month < 9){
                    month = '0' + month
                }
                var day = parseInt(this.value7[1].getDate())
                if(day < 9){
                    day = '0' + day
                }
                temp[1] = String(this.value7[1].getFullYear()) + '-' + month + '-' + day 
                this.value6 = temp
                }else{
                    this.value6 = ''
                }
            },
            bigger(e) {
                var el = e.target
                this.currentImageSrc = $(el).attr('src')
                this.showImage = true
            },
            setCurentFile(file){
                
                this.currentFileId = file.id;
                this.dialogFormVisible4 = true
            },
            deleteFile(){
                event.stopPropagation()
                 var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/file/deletefile',
                    data: {
                        'id': _this.currentFileId
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.currentFileId = 0
                        _this.getFile()
                        _this.dialogFormVisible4 = false
                    }
                });
            },
            getFile() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/file/getfile',
                    data: {
                        'projectid': _this.currentProject.id
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.files = retdata
                    }
                });
            },
            upload1() {//上传评论中的图片
                var _this = this
                if ($('#file1 input').eq(0).val() == '') {
                    _this.$store.commit('showModal','先选择上传的文件')
                } else {

                    var formData = new FormData($("#file1")[0]);
                    formData.append('taskid', this.currentTask.id);
                    formData.append('projectid', this.currentProject.id);
                    formData.append('type', 0);
                    formData.append('note',0)
                    $.ajax({
                        url: 'http://192.168.1.66:5001/file/upload',
                        type: 'POST',
                        data: formData,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(res) {
                            _this.uploadimages.push(res)
                            formData = ''
                            $("#file1 input").val('')
                            console.log(res)
                        },
                        error: function(res) {

                        }
                    });
                }
            },
              upload2() {//上传附件
                var _this = this
                if ($('#file2 input').eq(0).val() == '') {
                    _this.$store.commit('showModal','先选择上传的文件')
                } else {

                    var formData = new FormData($("#file2")[0]);
                    formData.append('taskid', this.currentTask.id);
                    formData.append('projectid', this.currentProject.id);
                    formData.append('type', 0);
                    formData.append('note',1)
                    
                    console.log(formData)
                    $.ajax({
                        url: 'http://192.168.1.66:5001/file/upload',
                        type: 'POST',
                        data: formData,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(res) {
                            formData = ''
                            $("#file2 input").val('')
                            _this.getFile()
                        },
                        error: function(res) {

                        }
                    });
                }
            },
            addNewComment(taskcomment) {
                var _this = this
                if (taskcomment != 0) {
                    var message = '回复了你的评论：'
                    this.currentComment = taskcomment
                    var fdid = this.currentComment.id
                    var toWho = this.currentComment.entuserid
                    var comment= this.newReply
                }else{
                    var message = '评论了你的任务：'
                    var fdid = 0
                    var toWho = this.currentTask.taskuser.id
                    var comment = this.newComment
                }
                if(comment == '' && this.uploadimages.length == 0){
                    return ;
                }else{
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/comment/addcomment',
                    data: {
                        'fdid': fdid,
                        'content': comment,
                        'taskid': _this.currentTask.id,
                        'entuserid': localStorage.userid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        var idArray = []
                        if(_this.uploadimages.length > 0){
                            for(var key in _this.uploadimages){
                                idArray.push(_this.uploadimages[key].id)
                            }
                        }
                        _this.updateFile(idArray,retdata.id)
                        _this.addNotice(2,localStorage.userid,toWho,_this.currentProject.id,_this.currentTask.id,localStorage.username + message + _this.newComment)
                        _this.httpServer.emit('newNotices',{'to':toWho})
                        _this.newComment = ''
                        _this.currentComment = {}
                        _this.newcomment = true
                        _this.taskDetail(_this.currentTask)
                    }
                });

                }
            },
            updateFile(array,id){
                var _this = this 
                var idString = array.join(',')
                 $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/file/updatefile',
                    data: {
                        'ids': idString,
                        'commentid':id
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    success: function(retdata) {
                       _this.uploadimages = []
                    },
                    error: function(request) {
                        console.log(request)
                    },
                });
            },
            commentReply(taskComment) {
                this.currentComment = taskComment
                this.newcomment = false
            },
            replyCancel() {
                this.newcomment = true
                this.currentComment = {}
                this.uploadimages = []
            },
            deleteComment(id) {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/comment/deletecomment',
                    data: {
                        'id': id
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    success: function(retdata) {
                        _this.newComment = ''
                        _this.taskDetail(_this.currentTask)
                    },
                    error: function(request) {
                        _this.newComment = ''
                        _this.taskDetail(_this.currentTask)
                    },
                });
            },
            taskDetail(task) {
                this.currentTask = task
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5001/comment/getcomments',
                    data: {
                        'taskid': _this.currentTask.id
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.taskComments = retdata
                    }
                });
                this.dialogFormVisible3 = true
              
            },
            getTaskUsers() {
                var response;
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/getUsers',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误');
                    },
                    success: function(retdata) {
                        response = retdata
                    }
                });
                return response
            },
            getUserName() {
                var usersObj = this.getTaskUsers()
                var taskUsers = []
                for (var i = 0; i < usersObj.data.length; i++) {
                    for (var j = 0; j < this.users.length; j++) {
                        if (usersObj.data[i].taskuser == this.users[j].fuserid) {
                            taskUsers.push(this.users[j])
                        }
                    }
                }
                var obj1 = {
                    'fuserid': 0,
                    'username': '未指派任务'
                }
                var obj2 = {
                    'fuserid': -1,
                    'username': '全部任务'
                }

                taskUsers.push(obj1)
                taskUsers.push(obj2)
                this.taskUsers = taskUsers

            },
            getAllUsers() {
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/user/fetchteamuser',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        self.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        self.users = retdata.Table2
                        self.getUserName()
                    }
                });
            },
            selectteam() {
                var el = event.currentTarget
                this.team = $(el).text()
                if (this.team == '美嘉') {
                    this.teamid = 4
                } else if (this.team == '美冠') {
                    this.teamid = 16
                } else {
                    this.teamid = 29
                }
                this.getAllTasks()
                this.getAllProjects()
            },
            showAssignDialog(task) {
                // this.taskUserid = taskUserid
                this.dialogFormVisible1 = true
                this.currentTask = task
            },
            Assign() {
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'id': self.currentTask.id,
                        'taskuser': self.taskUserid,
                        'endtime': self.endtime
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: true,
                    error: function(request) {
                        self.$notify({
                            title: '错误',
                            message: '网络连接失败',
                            type: 'error',
                            duration: 2500
                        });
                        self.dialogFormVisible1 = false
                        self.taskUserid = ''
                        self.endtime = ''
                        self.currentTask = {}
                        self.getAllTasks()
                    },
                    success: function(retdata) {
                        self.$notify({
                            title: '成功',
                            message: '任务指派成功',
                            type: 'success',
                            duration: 2500
                        });
                        self.dialogFormVisible1 = false
                        console.log(1)
                        self.addNotice(1,localStorage.userid,self.taskUserid,self.currentProject.id,self.currentTask.id,localStorage.username + '为您指派了新任务:' + self.currentTask.taskcomments)
                        _this.httpServer.emit('newNotices',{'to':self.taskUserid})
                        self.taskUserid = ''
                        console.log(2)                        
                        self.endtime = ''
                        self.currentTask = {}
                        self.getAllTasks()
                    }
                });
            },
            changeTaskStatus(id, type) {
                var self = this;
                if(type == '1'){
                    var donetime = new Date().toLocaleDateString();
                }else{
                    var donetime = '1990-01-01'
                }
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'id': id,
                        'status': type,
                        'donetime':donetime
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: true,
                    error: function(request) {
                        self.$notify({
                            title: '错误',
                            message: '网络连接失败',
                            type: 'error',
                            duration: 2500
                        });
                        self.getAllTasks()
                    },
                    success: function(retdata) {
                        self.$notify({
                            title: '成功',
                            message: '任务状态变更成功',
                            type: 'success',
                            duration: 2500
                        });
                        self.getAllTasks()
                    }
                });
            },
            getAllProjects() {
                var self = this
                this.whichShow = 'projects'
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/project/get',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'query.teamid': self.teamid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        self.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        self.projects = retdata.data
                    }
                });
            },
            showChangeProjectIdDialog(task) {
                this.currentTask = task
                this.dialogFormVisible2 = true
            },
            changeTaskProjectId() {
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'id': self.currentTask.id,
                        'projectid': self.selectedProjectId
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: true,
                    error: function(request) {
                        self.$notify({
                            title: '错误',
                            message: '网络连接失败',
                            type: 'error',
                            duration: 2500
                        });
                        self.dialogFormVisible2 = false
                        self.selectedProjectId = ''
                        self.getAllTasks()
                    },
                    success: function(retdata) {
                        self.$notify({
                            title: '成功',
                            message: '所属项目变更成功',
                            type: 'success',
                            duration: 2500
                        });
                        self.selectedProjectId = ''
                        self.dialogFormVisible2 = false
                        self.getAllTasks()
                    }
                });
            },
            getProjectById(project) {
                this.whichShow = 'tasks'
                this.currentProject = project
                    //根据id获取项目详情
                this.getAllTasks()
                this.getFile()

            },
            getAllTasks() {
                var self = this
                this.whichShow = 'tasks'
                if (this.currentProject.id == 0) {
                    var data = {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'query.teamid': self.teamid,
                    }
                } else {
                    var data = {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'query.teamid': self.teamid,
                        'query.projectid': this.currentProject.id
                    }
                }
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/get',
                    data: data,
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        self.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        var data = retdata
                        for (var i = 0; i < data.data.length; i++) {
                            if (data.data[i].endtime != null) {
                                data.data[i].endtime.substring(0, 10)
                            }
                        }
                        self.tasks = data.data
                    }
                });
            },
            addNewTask() {
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/add',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'taskcomments': self.taskName,
                        'projectid': self.currentProject.id
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        self.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        self.$notify({
                            title: '成功',
                            message: '新任务添加成功',
                            type: 'success',
                            duration: 1500
                        });
                        self.taskName = ''
                        self.getAllTasks()
                    }
                });
            },

            addNewProject() {
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/project/add',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'projectname': self.projectName,
                        'color': '#2c3e50'
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error: function(request) {
                        self.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        self.$notify({
                            title: '成功',
                            message: '新项目添加成功',
                            type: 'success',
                            duration: 1500
                        });
                        self.projectName = ''
                        self.getAllProjects()
                    }
                });
            },
            //任务归档
            taskArchive(id, type) {
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/task/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'id': id,
                        'isarchived': type
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: true,
                    error: function(request) {
                        self.$notify({
                            title: '错误',
                            message: '网络连接失败',
                            type: 'error',
                            duration: 2500
                        });
                        self.getAllTasks()
                    },
                    success: function(retdata) {
                        var mess = ''
                        if (type == 0) {
                            mess = '撤销归档成功'
                        } else {
                            mess = '归档成功'
                        }
                        self.$notify({
                            title: '成功',
                            message: mess,
                            type: 'success',
                            duration: 2500
                        });
                        self.getAllTasks()
                    }
                });
            },
            projectArchive(id, type) {
                event.stopPropagation()
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/project/archive',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'id': id,
                        'isarchived': type
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: true,
                    error: function(request) {
                        self.$notify({
                            title: '错误',
                            message: '网络连接失败',
                            type: 'error',
                            duration: 2500
                        });
                        self.getAllProjects()
                    },
                    success: function(retdata) {
                        var mess = ''
                        if (type == 1) {
                            mess = '归档成功'
                        } else {
                            mess = '撤销归档成功'
                        }
                        self.$notify({
                            title: '成功',
                            message: mess,
                            type: 'success',
                            duration: 2500
                        });
                        self.getAllProjects()
                    }
                });
            },
            changeProjectColor(id, color) {
                event.stopPropagation()
                var self = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/project/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': self.teamid,
                        'id': id,
                        'color': color
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: true,
                    error: function(request) {

                    },
                    success: function(retdata) {
                    
                        self.getAllProjects()
                    }
                });
            }
        },
        computed:{
            getNoticeNum(){
                var temp = []
                this.notices.forEach(function(value,index,array){
                    if(value.status == 1){
                        temp.push(value)
                    }
                })
                return temp.length
            }
        },
        mounted() {
            this.getAllProjects()
            this.getAllUsers()
            this.getNotice()
            this.socketStart()
                }
            }
</script>
<style>
    .projects {
        margin: 15px auto;
        width: 940px;
        font-size: 16px;
        color: #666;
    }
    
    .todos a:hover,
    .todos a:link,
    .todos a:active {
        background-color: #aaa
    }
    
    .nav {
        clear: both;
    }
    
    .nav>ul {
        height: 40px;
        display: block;
        background-color: white;
        /*border-radius: 5px;*/
    }
    
    .nav>ul>li {
        list-style: none;
        float: left;
        padding: 5px 10px;
        margin-top: 5px;
    }
    
    #selectteam i,
    #selectProject i {
        font-size: 10px;
    }
    
    #newtodo,
    #newProjects {
        margin-top: -2px;
        padding-left: 10px;
        font-size: 14px;
        float: left;
    }
    
    #newtodo input,
    #newProjects input {
        border: 1px solid #bbb;
        width: 300px;
        border-radius: 0
    }
    
    .seeAllTasks:hover,
    .seeAllTasks:link,
    .seeAllTasks:active,
    .seeAllProjects:hover,
    .seeAllProjects:link,
    .seeAllProjects:active {
        color: #999
    }
    
    .todos-all {
        /*padding-top: 20px;*/
        float: left;
        clear: both;
        text-align: left
    }
    
    .todos {
        padding-left: 0;
        clear: both
    }
    
    .todos li {
        /*margin-left: -30px;*/
        list-style: none;
        margin-top: 10px;
        position: relative;
        margin-left: -50px;
        padding-left: 70px;
    }
    
    .todos li .el-checkbox {
        position: absolute;
        left: 45px;
        width: 22px;
        height: 22px;
    }
    
    .todos p {
        display: inline-block
    }
    
    li .operate {
        display: inline-block;
        visibility: hidden;
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        position: absolute;
        left: 0px;
    }
    
    li:hover .operate {
        visibility: visible
    }
    
    .todos>li a {
        margin-top: -3px;
        display: inline-block;
        background-color: #fff;
        padding: 0 6px;
        height: 16px;
        line-height: 16px;
        border-radius: 8px;
        font-size: 10px;
        vertical-align: middle
    }
    
    .taskComment {
        cursor: pointer;
    }
    
    .taskCommentOperation a {
        font-size: 13px;
        /*float: right;*/
        padding-left: 10px;
        color: #40a0d9
    }
    
    .taskCommentOperation a:hover {
        color: #1565a3
    }
    
    .taskComment:hover {
        color: #000;
        font-size: 17px;
    }
    
    .menu {
        display: none
    }
    
    .li-team {
        float: left
    }
    
    .section-projects ul>li {
        list-style: none;
    }
    
    .section-projects ul>li>div {
        height: 106px;
        width: 280px;
        /*border-radius: 3px;*/
        margin: 9px;
        padding: 10px;
        float: left;
        /*background-color: #2980b9;*/
        cursor: pointer;
        color: #fff;
    }
    
    .section-projects ul>li>div:hover {
        box-shadow: 10px 10px 10px #bbb;
    }
    
    .color-pick span {
        display: inline-block;
        height: 16px;
        width: 16px;
        /*border-radius: 3px;*/
        border: 1px solid #bbb;
        opacity: .8
    }
    
    .color-pick span:hover {
        opacity: 1
    }
    
    .projectName {
        text-align: left;
        vertical-align: middle;
        margin-top: 5px;
        font-family: '微软雅黑';
        font-size: 16px;
    }
    
    .color-pick {
        visibility: hidden;
        position: absolute;
        opacity: 0.1;
        left: 5px;
        bottom: 5px;
        z-index: 95
    }
    
    .delete {
        visibility: hidden;
        position: absolute;
        right: 10px;
        bottom: 4px;
    }
    
    .section-projects ul>li>div:hover .delete,
    .section-projects ul>li>div:hover .color-pick {
        visibility: visible;
        opacity: 1
    }
    
    .selectedUserTasks {
        /*color: #f00;
        font-weight: bold;*/
        background-color: #FFEBCD
    }
     .selected {
        /*color: #f00;
        font-weight: bold;*/
        background-color: #FFEBCD
    }
    .box1 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        opacity: 0.5;
        z-index: 100;
    }
       .box2 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        opacity: 0.7;
        z-index: 102;
    }
    
    
    .comment {
        position: absolute;
        top: 5%;
        left: 20%;
        width: 60%;
        height: 90%;
        background-color: #fdfdfd;
        z-index: 101;
        padding: 20px 40px 40px 40px;
    }
    .comment-body{
        max-height: 90%;
        overflow-y:auto;
        overflow-x: hidden;
        padding-bottom:100px;
    }
    .comment-list {
        /*height: 500px;*/
        /*max-height: 500px;*/
        /*overflow-y: auto;*/
        /*margin-bottom: 20px;*/
        padding: 20px;
    }
    .new-comment{
        margin-bottom: 20px;
    }
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #F5F5F5;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(100, 100, 100, 0.3);
        border-radius: 5px;
        background-color: #F3F3F3;
    }
    /*定义滑块 内阴影+圆角*/
    
    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        box-shadow: inset 0 0 6px rgba(100, 100, 100, .3);
        background-color: #999
    }
    
    .comment ul {
        text-align: left;
        list-style: none;
        padding-left: 15px;
        /*margin: 0;*/
    }
    
    .comment .icon {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 20px;
    }
    .commentReply {
        width: 400px;
        margin-bottom: 30px;
    }
    
    .commentReply textarea {
        resize: none;
        width: 400px;
        height: 80px;
        border-radius: 0
    }
    
    .file {
        /*width: 940px;*/
        list-style: none;
        padding-left: 0;
        margin-bottom:20px;
        text-align: left
    }
    
    .file div {
        float: left;
    }
    
    .file-item {
        padding: 10px;
        border-radius: 5px;
        width: 150px;
    }
    
    .file-item div:hover .fa-times{
        display: block;
        position:absolute;
        top:5px;
        right:5px;
        color:#eee
    }
    .file-item .fa-times{
        display: none;
       
    }
    .file-item span {
        display: block;
        margin-top: 5px;
    }
    
    .file-item div:first {
        height: 100px;
        width: 150px;
    }
    
    .file-item img {
        cursor: pointer;
        border-radius: 5px;
        width: 100%;
    }
    
    .file-item img:hover {
        border: 1px solid #bbb
    }
    #file1{
        margin-top:10px;
        padding-top:20px;
        padding-left:28px;
        position:relative;
        border:2px dashed #b8c7ce;
        height:100px;
        width:100px;
        overflow:hidden;
        border-radius: 5px;
        cursor: pointer;
        color: #b8c7ce
    }
    #file1:hover{
         border:2px dashed #999;
    }
    .comment-img{
        font-family: '宋体';
        font-size:40px;
        height: 40px;
        width:40px;
        float:left;
        cursor: pointer;
    }
    .upload-img{
        height: 100px;
        width: 100px;
        float: left;
        margin-top:10px;
        margin-right: 10px;
        border-radius: 5px;
        border:2px dashed #b8c7ce;
        display: table;
        text-align: center
    }
    .upload-img span{
        display: table-cell;
        vertical-align: middle
    }
    .upload-img span img{
        width: 100%;
    }
    .comment-img:hover{
        color:#004974
    }

    .comment-img i{
        height: 40px;
        width: 40px;
    }
    #file2 {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        /*padding: 4px 12px;*/
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }
    
    #file2 input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    
    #file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
    .notice{
        position:relative;
        height:20px;
        width:30px;
        
    }
   .notice:hover .fa-bell-o {
       color: #000;
       animation: change 0.5s ease .1s infinite normal ;
        transform-origin: top center;
   }
    .notice .dropdown-menu{
        position:absolute;
        top:0;
        left:0;
    }
    @keyframes change{
        0%{-webkit-transform: rotate(0deg);}
        15%{-webkit-transform: rotate(8deg);}
        25%{-webkit-transform: rotate(15deg);}
        50%{-webkit-transform: rotate(0deg);}
        75%{-webkit-transform: rotate(-15deg);}
        85%{-webkit-transform: rotate(-8deg);}
        100%{-webkit-transform:rotate(0deg);}
    }
    .fa-bell-o{
        font-size:20px;
    }

    .shake{

        animation: change 0.5s ease 1s infinite normal ;
        transform-origin: top center;
    }
    
    .badge{
        background-color:#ff0000;
        position:absolute;
        top:-10px;
        right:-25px;
    }
    @media(max-width: 768px) {
        .menu {
            display: block
        }
    }
</style>